<template>
    <div class="page_sendfullYear">
			<div class="header">
				<p class="h-time">2018年1月11日-1月17日</p>
			</div>
			<div class="p-body">
				<div v-if="false" class="p-item">
					<div class="i-left">
						<h4>优选计划（30天）</h4>
						<h2>9.00%</h2>
						<p>预期年化</p>
					</div>
					<div class="i-right">
							<h4>投资每满</h4>
							<h2>3000元</h2>
							<p>送<i>100M</i><br/>全国流量</p>
					</div>
				</div>
				<div v-if="false" class="p-item">
					<div class="i-left">
						<h4>优选计划（90天）</h4>
						<h2>10.00%</h2>
						<p>预期年化</p>
					</div>
					<div class="i-right">
							<h4>投资每满</h4>
							<h2>10000元</h2>
							<p>送<i>100</i>现金+<br/><i>100M</i>全国流量</p>
					</div>
				</div>
				<div  v-if="false" class="p-item p-item-last">
					<div class="i-left">
						<h4></h4>
						<h2>12.00%</h2>
						<p>预期年化</p>
					</div>
					<div class="i-right">
							<h4>投资每满</h4>
							<h2>50000元</h2>
							<p>送<i>300</i>现金+<br/><i>600M</i>全国流量</p>
					</div>
				</div>
				<div class="p-item">
					<img v-bind:src="s1" />
				</div>
				<div class="p-item">
					<img v-bind:src="s2" />
				</div>
				<div class="p-item">
					<img v-bind:src="s3" />
				</div>
				<div @click="JumpProductList" class="p-btn">点我投资</div>
			</div>
			<div class="footer">
				<h4>活动规则</h4>
				<div class="rule-box">
					<p>1. 活动期间，投资带有“开年有礼”活动标签的活动专享标，30天产品投资每满3000元送100M流量，90天产品投资每满10000元送100元+100M流量，VIP用户投资90天产品每满50000元送300元+600M流量；</p>
					<p>2. 账户日均资产在20万元以上即可联系客服申请成为VIP用户；</p>
					<p>3. 本活动不与“新手标”和“新手礼包”活动同享，现金红包将在活动结束后1-3个工作日内发放完成；</p>
					<p>4. 对活动有任何疑问，敬请咨询优选金融客服热线400-156-7657。</p>
				</div>
				<p>在法律允许范围内，优选金融保留对本次活动的最终解释权。</p>
				<p>优选金融所有奖品及活动均与苹果公司无关。</p>
				<p>活动仅成年人可参与，投资有风险，理财需谨慎。</p>
				<div class="f-ad"><i>广告</i>理财有风险，投资需谨慎</div>
			</div>
    </div>
</template>

<script>
export default {
  props: [],
  data() {
    return {
			s1:require("../../public/imgs/send_full_year/s-y-1.jpg"),
			s2:require("../../public/imgs/send_full_year/s-y-2.jpg"),
			s3:require("../../public/imgs/send_full_year/s-y-3.jpg")
		};
  },
  methods: {
		JumpProductList(){
			APP.JumpNavite("jumpToProductList");
		}
	}
};
</script>
<style scoped lang="less">
.page_sendfullYear {
  position: relative;
  background: #f62a2b url("../../public/imgs/send_full_year/s-y-header.png")
    center 0 no-repeat;
  background-size: 100% auto;
  box-sizing: border-box;

  .header {
    position: relative;
    height: 530px;
    width: 100%;
    .h-time {
      box-sizing: border-box;
      padding: 390px 0 0 0;
      text-align: center;
      color: #fff;
      width: 100%;
      font-size: 18px;
    }
  }
  .p-body {
    box-sizing: border-box;
    padding: 0 30px;
    .p-item {
      display: -webkit-box;
      height: 275px;
      margin: 0 0 20px 0;
      h2,
      h4 {
        font-weight: normal;
      }
      i {
        font-style: normal;
      }
      .i-left {
        width: 410px;
        background: #fff;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-box-align: center;
        -webkit-box-pack: center;
        h4 {
          font-size: 34px;
          color: #7f2425;
        }
        h2 {
          font-size: 64px;
          color: #f74829;
          height: 110px;
          line-height: 110px;
        }
        p {
          color: #9d5a5a;
          font-size: 22px;
        }
      }
      .i-right {
        -webkit-box-flex: 1;
        background: #ffe9d9;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-box-align: center;
        -webkit-box-pack: center;
        h4 {
          font-size: 22px;
          color: #9d5a5a;
        }
        h2 {
          font-size: 40px;
          color: #f74829;
          margin: 10px 0 18px 0;
          font-weight: 400;
        }
        p {
          font-weight: 400;
          color: #f74829;
          font-size: 30px;
          i {
            color: #ffaa31;
          }
        }
      }
      &.p-item-last {
        .i-left {
          background: #fff6d9
            url("../../public/imgs/send_full_year/s-y-vip.jpg") 0 0 no-repeat;
          background-size: 72px 72px;
        }
        .i-right {
          background: #ffecb2;
        }
      }
    }
    .p-btn {
      height: 100px;
      background: #ffce75;
      color: #b5191a;
      font-size: 40px;
      line-height: 100px;
      text-align: center;
      margin-bottom: 50px;
    }
  }
  .footer {
    box-sizing: border-box;
    padding: 0 30px;
    color: #fff;
    h4 {
      height: 50px;
    }

    .rule-box {
			color: #fff;
			margin: 0 0 15px 0;
      p {
        line-height: 40px;
        font-size: 24px;
				text-align: justify;
      }
    }
    .f-ad {
      text-align: center;
      color: #fff;
      font-size: 16px;
      padding: 40px 0;
      box-sizing: border-box;
      i {
        font-style: normal;
        display: inline-block;
        border: 1px solid #d28698;
        border-radius: 3px;
        padding: 5px;
        box-sizing: border-box;
        margin-right: 8px;
      }
    }
    & > p {
      color: #ffcccd;
      font-size: 20px;
      line-height: 42px;
    }
  }
}
</style>
